/* eslint-disable vue/no-unused-components */
/* eslint-disable no-unused-vars */
<template>
  <ve-liquidfill
    :data="chartData"
    height="100%"
    :settings="chartSettings"
  ></ve-liquidfill>
</template>

<script>

export default {
  data() {
    return {
      chartData: {
        columns: ['title', 'percent'],
        rows: [
          {
            title: 'rete',
            percent: 0.68
          }
        ]
      },
      chartSettings: {
        seriesMap: {
          rete: {
            radius: '85%'
          },
          label: {
            formatter: (v) => {
              return `${(v.data.value * 100).toFixed(2)}%`
            },
            textStyle: {
              fontSize: 36,
              color: '#999',
              fontWeight: 'normal'
            },
            position: ['50%', '50%'],
            insideColor: '#fff'
          },
          backgroundStyle: {
            color: '#fff'
          },
          itemStyle: {
            shadowBlur: 0,
            shadowColor: '#fff'
          },
          amplitude: 8,
          outline: {
            itemStyle: {
              borderColor: '#aaa4a4',
              borderWidth: 1,
              color: 'none',
              shadowBlur: 0,
              shadowColor: '#fff'
            }
          },
          color: ['rgba(204,178,26,.7)']
        }
      }
    }
  }
}
</script>
